<!--
* @author wn
* @date 2022/07/01 10:21:52
* @description: 商品评价 中 含有图片的 组件
!-->
<template>
	<div class="goods-comment-image">
		<div class="list">
			<a
				href="javascript:;"
				v-for="(url, index) in pictures"
				:key="index"
				@click="currentIndex = index"
				:class="{ active: currentIndex === index }"
			>
				<img :src="url" alt="" />
			</a>
		</div>
		<!-- 预览 不显示第一张 索引为0 -->
		<div class="preview" v-if="currentIndex || currentIndex === 0">
			<img :src="pictures[currentIndex]" alt="" />
			<i @click="currentIndex = ''" class="iconfont icon-close-new"></i>
		</div>
	</div>
</template>
<script>
import { ref } from 'vue'
export default {
	name: 'GoodsCommentImage',
	props: {
		pictures: {
			type: Array,
			default: () => [],
		},
	},
	setup() {
		// 定义切换的 url
		const currentIndex = ref('')
		return { currentIndex }
	},
}
</script>
<style scoped lang="less">
.goods-comment-image {
	padding: 10px 0 20px;
	.list {
		display: flex;
		flex-wrap: wrap;
		a {
			width: 120px;
			height: 120px;
			border: 1px solid #e4e4e4;
			margin-right: 20px;
			margin-bottom: 10px;
			img {
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
			&.active {
				border: 1px solid @xtxColor;
			}
		}
	}
	.preview {
		position: relative;
		width: 480px;
		height: 480px;
		border: 1px solid #e4e4e4;
		background: #f8f8f8;
		img {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
		i {
			position: absolute;
			top: 0;
			right: 0;
			width: 30px;
			height: 30px;
			background: rgba(0, 0, 0, 0.2);
			color: #fff;
			text-align: center;
			line-height: 30px;
		}
	}
}
</style>
